<div ng-init="init();" class="kmi-layout-content SMT21-content" ng-class="[page_mode]">
    <!-- SMT 產品過帳 -->
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'SMT21.title' | translate"></div>
        <div class="kmi-side-btn" style="right: 148px;  top: 12px;" ng-click="settings();"  ng-show="page_mode == 'next_page'">
            <img src="image/icons/settings.png"></img>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-logo"></div>
    </div>
    <!-- 選擇區域畫面 select-area -->
    <div class="kmi-layout-main-content select-area">
        <div class="kmi-layout-page" style="justify-content: center;">
            <!-- 區域： -->
            <div class="kmi-text-fields">
                <label class="label" ng-bind="'SMT21.area' | translate" style="flex: 0 0 25%;"></label>
                <input class="value" style="flex: 0 0 50%;" ng-model="data.area_no"></input>
                <div class="tip search" ng-click="loadAreaList();">
                    <img src="image/icons/search.png"></img> 
                </div>
            </div>
            <!-- 作業站： -->
            <div class="kmi-text-fields">
                <label class="label" ng-bind="'SMT21.op_no' | translate" style="flex: 0 0 25%;"></label>
                <input class="value" style="flex: 0 0 50%;" ng-model="data.op_no"></input>
                <div class="tip search" ng-click="loadOpNoList();">
                    <img src="image/icons/search.png"></img> 
                </div>
            </div>
            <!-- 包裝來源： -->
            <div class="kmi-text-fields">
                <label class="label" ng-bind="'SMT21.from' | translate" style="flex: 0 0 25%;"></label>
                <input class="value" style="flex: 0 0 50%;" ng-model="data.productno"></input>
                <div class="tip search" ng-click="loadsourceList();">
                    <img src="image/icons/search.png"></img> 
                </div>
            </div>
            <!-- 包裝階層： -->
            <div class="kmi-text-fields">
                <label class="label" ng-bind="'SMT21.list1.packing_level' | translate" style="flex: 0 0 25%;"></label>
                <input class="value" style="flex: 0 0 50%;" ng-model="data.level_name"></input>
                <div class="tip search" ng-click="loadlevelNameList();">
                    <img src="image/icons/search.png"></img> 
                </div>
            </div>
        </div>
        <div class="kmi-layout-footer" ng-click="confirm();">
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1">
                <i class="material-icons">done</i>
            </button>
        </div>
    </div>
    <!-- 選擇區域後畫面 next-page  -->
    <div class="kmi-layout-main-content init-none next-page packing-special">
        <div class="kmi-layout-page right" ng-hide="packing_panel_mode == 'MAX'">
            <!-- 產品序號 product_serialNumber_panel -->
            <div class="product_serialNumber_panel">
                <div class="serialNumber_panel">
                    <!-- 左半邊 -->
                    <div class="top-panel ">
                        <!-- 產品序號 -->
                        <div class="kmi-text-fields inner-content">
                            <label class="label" ng-bind="'SMT21.list1.input_barcode' | translate"></label>
                            <input ng-keypress="input_barcode_no($event);" ng-model="barcode_no" id="barcode_no"/>
                            <div class="tip qrcode" ng-click="QRCodeScanner();">
                                <img src="image/icons/QRCode.png">
                            </div>
                        </div>
                    </div>
                    <!-- 右半邊 -->
                    <div class="top-panel">
                        <div class="kmi-text-fields inner-content">
                            <div class="kmi-text-fields top-content-data">
                                <!-- 包裝數： -->
                                <label class="label fixed-width" ng-bind="'SMT21.packing_num' | translate"></label>
                                <input readonly class="value" ng-model="data.levelqty" ng-click="input_tray_qty($event)" ng-disabled='true'></input>
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
            <!-- 產品基本資料 product_basicData_panel  -->
                <div class="basicData_panel">
                    <div class="basicData">
                        <div class="kmi-text-fields content-data">
                            <!-- 產品編號： -->
                            <label class="label fixed-width" ng-bind="'SMT21.list1.product_no' | translate"></label>
                            <label class="value" ng-bind="product_no"></label>
                        </div>
                        <div class="kmi-text-fields content-data">
                            <!-- 產品名稱： -->
                            <label class="label fixed-width" ng-bind="'SMT21.list1.product_name' | translate"></label>
                            <label class="value" ng-bind="product_name"></label>
                        </div>
                        <div class="kmi-text-fields content-data">
                            <!-- 規格： -->
                            <label class="label fixed-width" ng-bind="'SMT21.list1.product_spec' | translate"></label>
                            <div class="value" ng-bind="item_spec"></div>
                        </div>
                        <div class="kmi-text-fields content-data">
                            <!-- 包裝階層： -->
                            <label class="label fixed-width" ng-bind="'SMT21.list1.packing_level' | translate"></label>
                            <div class="value" ng-bind="data.level_name"></div>
                        </div>
                        <div class="kmi-text-fields content-data">
                            <!-- 包裝單位： -->
                            <label class="label fixed-width" ng-bind="'SMT21.list1.packing_unit' | translate"></label>
                            <div class="value" ng-bind="data.content"></div>
                        </div>
                    </div>
                </div>
            <!-- 裝箱清單 -->
            <div class="product_repairReason_panel">
                <div class="kmi-list column-selector" column-selector-id="" style="border-radius: 0 0 6px 6px;">
                    <div class="kmi-list__header">
                        <div class="kmi-list__column" style="flex: 0 0 40px"></div>
                        <!-- 順序 -->
                        <div class="kmi-list__column" style="flex: 0 0 40px" ng-bind="'SMT21.list2.order' | translate"></div>
                        <!-- 生產批號-->
                        <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT21.list2.input_barcode' | translate"></div>
                        <!-- 數量 -->
                        <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT21.qty' | translate"></div>
                    </div>
                    <div class="kmi-list__row-content">
                        <div class="kmi-list__row" ng-repeat="item in packing_detail track by $index">
                            <div class="kmi-list__column column-border" style="flex: 0 0 40px;">
                                <button class="mdl-button mdl-button--icon" ng-click="removeRow(item);">
                                    <img src="image/icons/delete.png"></img>
                                </button>
                            </div>
                            <!-- 順序 -->
                            <div class="kmi-list__column column-border" style="flex: 0 0 40px;" ng-bind="item.seq"></div>
                            <!-- 生產批 -->
                            <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.pcs_no"></div>
                            <!-- 数量 -->
                            <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.level_qty"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底下資訊 -->
            <div class="btn_panel">
                <!-- 打包數 -->
                <div class="kmi-text-fields bottom-data">
                    <label class="label fixed-width" ng-bind="'SMT21.list3.small_packing_num' | translate" ng-show="data.packlevelseq == '02'"></label>
                    <label class="label fixed-width" ng-bind="'SMT21.list3.middle_packing_num' | translate" ng-show="data.packlevelseq == '03'"></label>
                    <label class="label fixed-width" ng-bind="'SMT21.list3.large_packing_num' | translate" ng-show="data.packlevelseq == '04'"></label>
                    <label class="label fixed-width" ng-bind="'SMT21.list3.tray_packing_num' | translate" ng-show="data.packlevelseq == '01'"></label>
                    <label class="value" ng-bind="data_counting.total_fullbox_num"></label>
                </div>
                <!-- 包装數 -->
                <div class="kmi-text-fields bottom-data">
                    <label class="label fixed-width" ng-bind="'SMT21.list3.full_pack_num' | translate"></label>
                    <label class="value" ng-bind="data_counting.total_list_num"></label>
                </div>
                <!-- 剩餘數 -->
                <div class="kmi-text-fields bottom-data">
                    <label class="label fixed-width" ng-bind="'SMT21.list3.remain_no' | translate"></label>
                    <label class="value" ng-bind="data_counting.remain_num"></label>
                </div>
                <div class="kmi-text-fields bottom-data">
                    <div class="kmi-button kmi-button-packing" style="width:100px" ng-click="sealBox();">
                        <label ng-bind="'SMT21.list3.send_without_hesitate' | translate"></label>
                        <div class="kmi-can-click"></div>
                    </div>
                </div>
                <div class="kmi-text-fields bottom-data">
                    <div class="kmi-button kmi-button-delete" style="width:100px" ng-click="cleanAll();">
                        <label ng-bind="'SMT21.list3.clean' | translate"></label>
                        <div class="kmi-can-click"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="kmi-layout-page left" ng-class="{'is-min':packing_panel_mode == 'MIN', 'is-max':packing_panel_mode == 'MAX'}">
            <div class="panel-btn button-left" ng-click="changePanelSize('MAX');" ng-hide="packing_panel_mode == 'MAX'" ng-class="{'open-div':packing_panel_mode == 'MIN'}">
                <img src="image/icons/dropleft.png"></img>
                <div class="kmi-can-click"></div>
            </div>
            <div class="panel-btn button-right" ng-click="changePanelSize('MIN');" ng-hide="packing_panel_mode == 'MIN'">
                <img src="image/icons/dropright.png"></img>
                <div class="kmi-can-click"></div>
            </div>
            <div class="fields-content" ng-hide="packing_panel_mode == 'MIN'">
                <!-- 區域 -->
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'SMT21.area' | translate"></label>
                    <label class="value" ng-bind="data.area_no"></label>
                </div>
                <!-- 作業站 -->
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'SMT21.op_no' | translate"></label>
                    <label class="value" ng-bind="data.op_no"></label>
                </div>
                <!-- 来源 -->
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'SMT21.from' | translate"></label>
                    <label class="value" ng-bind="data.productno"></label>
                    <div class="kmi-button kmi-button-confrim" style="width:108px;">
                        <label ng-bind="'SMT21.print_sn' | translate"></label>
                        <div class="kmi-can-click" ng-click="printTag_one_more_time();"></div>
                    </div>
                </div>
            </div>
            <div class="kmi-list column-selector" ng-hide="packing_panel_mode == 'MIN'" column-selector-id="work-list" kmi-scrollbar="1000px" style="border-bottom-width:0px;">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex: 0 0 40px;"></div>
                    <div class="kmi-list__column" style="flex: 0 0 208px;" ng-bind="'SMT21.list.print_times' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT21.list.packing_no' | translate"></div>
                    <div class="kmi-list__column" style="flex: 0 0 100px;;" ng-bind="'SMT21.list.packing_qty' | translate"></div>
                    <!-- <div class="kmi-list__column" style="flex: 0 0 208px;" ng-bind="'SMT21.plot_no' | translate"></div>
                    <div class="kmi-list__column" style="flex: 0 0 100px;" ng-bind="'SMT21.qty' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT21.list.item_no' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT21.list.item_name' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT21.list.item_spec' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT21.list.wo_no' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;max-width:100px;" ng-bind="'SMT21.list.wo_qty' | translate"></div> -->
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in packing_list track by $index">
                        <div class="kmi-list__column column-border" style="flex: 0 0 40px;">
                            <button class="mdl-button mdl-button--icon">
                                <img ng-src="{{item.isSelect?'image/icons/check1.png':'image/icons/check0.png'}}"></img>
                            </button>
                        </div>
                        <div class="kmi-list__column column-border" style="flex: 0 0 208px;" ng-bind="item.print_times"></div>
                        <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.packing_sn"></div>
                        <div class="kmi-list__column column-border" style="flex: 0 0 100px;;" ng-bind="item.total_num"></div>
                        <!-- <div class="kmi-list__column column-border" style="flex: 0 0 208px;" ng-bind="item.plot_no"></div>
                        <div class="kmi-list__column column-border" style="flex: 0 0 100px;text-align:right;padding:0 4px 0 0;" ng-bind="item.curqty"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.item_no"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.item_name"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.item_spec"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.wo_no"></div>
                        <div class="kmi-list__column" style="flex:1;max-width:100px;" ng-bind="item.mo_qty"></div>-->
                        <div class="kmi-can-click" ng-click="select_package(item);"></div> 
                    </div>
                </div>
            </div>
            <div class="stationMachine-title" ng-bind="'SMT21.packing_info' | translate" ng-show="packing_panel_mode == 'MIN'"></div>
        </div>
    </div>
</div>
